<template>
<section>
    <el-col :sm="24" :lg="16">
        <div class="grid-content bg-purple" :style="{backgroundColor:titleColor}">
            <div class="dev-title">用户信息</div>
        </div>
        <div class="col-bg clearfix">
            <el-form ref="form" :rules="edituser" :model="form" label-width="100px" @submit.prevent="onSubmit" style="margin:20px;width:60%;min-width:600px;">
                
                <el-form-item v-if="usertype==0" label="组织名" >
                    <el-input v-model="form.userCompany" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="form.userName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="nickName">
                        <el-input v-model="form.nickName" auto-complete="off"></el-input>
                    </el-form-item>
                <el-form-item label="电话号码" prop="phone">
                    <el-input v-model="form.phone" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload class="avatar-uploader" :headers="fileList" action="/api/auth/image_file/upload"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="form.avatar" :src="form.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="微信">
                    <el-input v-model="form.weixin"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :type="buttonColor" @click.native="onSubmit" :loading="editLoading">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-col>
</section>
</template>

<script>
    import {
        userinfo,
        userupdate

    } from '../../api/api';
    export default {
        data() {
            return {
                fileList: {
                    token: JSON.parse(localStorage.getItem('key'))
                },
                usertype:'',
                editLoading: false,
                form: {
                    userName: '',
                    phone: '',
                    email: '',
                    weixin: '',
                    address: '',
                    remark: '',
                    nickName:'',
                    userCompany:'',
                    avatar:''
                },
                edituser: {
                    userName: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
                    nickName:[{
                        required: true,
                        message: '请输入昵称',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
                    phone: [{
                        required: true,
                        message: '请输入电话号码',
                        trigger: 'blur'
                    }],
                    email: [{
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    }],

                }
            }
        },
        computed:{
            buttonColor(){
                return this.$store.state.buttonColor
            },
            titleColor(){
                return this.$store.state.titleColor
            },
            dialogTitleColor(){
                return this.$store.state.dialogTitleColor
            },
        },
        methods: {
            handleAvatarSuccess(res, file) {
                console.log(file.type);
                this.form.avatar = res.data.path;
            },
            beforeAvatarUpload(file) {
                console.log(file)
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isGIF = file.type === 'image/gif';
                let tp = false;
                if (isJPG) {
                    tp = isJPG;
                } else if (isPNG) {
                    tp = isPNG
                } else if (isGIF) {
                    tp = isGIF
                } else {

                }
                const isLt2M = file.size / 1024 / 1024 < 1;
                if (!isJPG && !isPNG && !isGIF) {
                    this.$message.error('上传头像图片只能是 JPG,GIF,PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 1MB!');
                }
                return tp && isLt2M;
            },
            getUsers() {
                if(this.menubt.indexOf('/user/my')==-1){  this.$message({
                            message: '您没有获取自己账户信息的权限',
                            type: 'warning'
                        });
                return false;
               }
                userinfo().then((res) => {
                    if (res.code == 0) {
                        this.editLoading = false;
                        //NProgress.done();
                        this.form.userName = res.data.userName;

                        this.form.phone = res.data.phone;

                        this.form.email = res.data.email;

                        this.form.weixin = res.data.weixin;

                        this.form.address = res.data.address;

                        this.form.remark = res.data.remark;
                        
                        this.form.nickName = res.data.nickName;
                        this.form.userCompany=res.data.userCompany

                    }
                });
            },
            onSubmit() {
                if(this.menubt.indexOf('/user/update')==-1){  this.$message({
                            message: '您没有编辑账户信息的权限',
                            type: 'warning'
                        });
                return false;
               }
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.editLoading = true;
                    //NProgress.start();
                    let para = Object.assign({}, this.form);
                    userupdate(para).then((res) => {
                        
                        this.begCode(res.code,res.message);
                            this.editLoading = false;
                        if (res.code == 0) {
                            //NProgress.done();
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            
                            this.$emit('fatherMethod')
                            this.getUsers();
                        }
                    });
                });
            }
        },
        mounted() {
            
            this.usertype = JSON.parse(sessionStorage.getItem('user')).type;
            this.menubt=localStorage.getItem('menubt');
            this.getUsers();
        }
    }
</script>